<template>
  <div class="ly-content">
    <div class="ly-center">
      <div class="uhead">
        <div class="usex" :style="{backgroundImage:'url('+user.userHead+')'}">
          <!--<i class="iconfont icon-icon35"></i>-->
        </div>
        <!--{{user.userName}}-->
        <div class="uname"></div>
        <div class="uphone">{{user.userNick}}</div>
        <div class="udefault">默认小区：{{name||"暂无"}}
          <div class="modify" @click="changeHousing()"></div>
        </div>
      </div>
      <div class="uinfo">
        <yd-cell-group>
          <yd-cell-item arrow @click.native="goRoomList">
            <yd-icon slot="icon" name="home" size=".42rem" color="#00bbff"></yd-icon>
            <span slot="left">我的房间</span>
            <span slot="right"></span>
          </yd-cell-item>
          <yd-cell-item arrow @click.native="goMember" v-if="isAuthentication== 1">
            <yd-icon slot="icon" name="ucenter" size=".42rem" color="#00bbff"></yd-icon>
            <span slot="left">成员管理</span>
            <span slot="right"></span>
          </yd-cell-item>
          <yd-cell-item arrow @click.native="goRepairList">
            <i slot="icon" class="iconfont icon-repair01" style="color: rgb(247, 183, 78);font-size: 0.42rem;"></i>
            <span slot="left">我的报事报修</span>
          </yd-cell-item>
          <yd-cell-item arrow @click.native="goAdviseList">
            <i slot="icon" class="iconfont icon-account-alert" style="color: rgb(6, 164, 128);font-size: 0.42rem;"></i>
            <span slot="left">我的投诉建议</span>
          </yd-cell-item>
        </yd-cell-group>
      </div>
    </div>


    <yd-popup v-model="showPop" position="center" width="86%">
      <div class="pop-info">
        <div class="pop-head">请选择默认小区</div>
        <yd-cell-group>
          <yd-cell-item v-for="house in housings" :key="house.id" @click.native="handleChoose(house.id,house)">
            <span slot="left">{{house.name}}</span>
            <span slot="right" class="ly-choose"><i :class="{'active': house.id == active}"></i></span>
          </yd-cell-item>
        </yd-cell-group>
        <div style="text-align: center;" class="pop-foot">
          <yd-button type="disabled" @click.native="showPop = false">取消</yd-button>
          <yd-button type="primary" @click.native="handleSure(house)">确认</yd-button>
        </div>
      </div>
    </yd-popup>

  </div>


</template>

<script>
  import http from "../../http";
  import storage from "../../store/storage.js";

  export default {

    data() {
      return {
        name: "",
        user: {},
        housingList: [],
        number: "",
        //  pop
        showPop: false,
        housings: [],
        house: '',
        dfHouse: '',
        active: '',
        isAuthentication: -1
      }
    },
    created: function () {
      this.init();
    },
    mounted: function () {
      this.getUser();
    },
    methods: {

      // 请求数据
      init: function () {
        let params = {};
        params.appId = storage.get("appId", 'local');
        http.post("/common/getIcon", params).then(res => {
          this.housings = res.data.housings;
        });

        const hasHouse = storage.get("housingId");
        //如果缓存里面有了房间信息则用缓存信息
        if (hasHouse) {
          this.name = storage.getObj("housingId").name;
          this.active = storage.getObj("housingId").id;
          this.hasAuth(this.active)
        }

      },

      getUser: function () {
        http.get("/communityApps/personalCenter/userInfo").then(res => {
          if (res.data.code == 20000) {
            storage.put("user", res.data.data);
            this.user = res.data.data;
          }
        });
      },
      hasAuth: function (housingId) {
        http.get("/communityApps/personalCenter/user/auth", {housingId}).then(res => {
          if (res.data.code == 20000) {
            this.isAuthentication = res.data.data
          }
        });
      },
      goRoomList: function () {
        this.$router.push({path: '/user/roomList'});
      },
      goMember: function () {
        this.$router.push("/user/memberList");
      },
      changeHousing: function () {
        this.showPop = true;
      },
      goRepairList: function () {
        this.$router.push("/user/repairList");
      },
      goAdviseList: function () {
        this.$router.push("/user/adviseList");
      },

      handleChoose: function (id, dfHouse) {
        this.active = id;
        this.dfHouse = dfHouse;
      },

      handleSure: function () {
        this.house = this.dfHouse.id;
        storage.put("housingId", this.dfHouse, 'local');
        storage.put("housingId", this.dfHouse);
        this.name = storage.getObj("housingId").name;
        this.showPop = false;
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">


  .ly-choose i {
    width: 0.36rem;
    height: 0.36rem;
    border: 1px solid #ccc;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    z-index: 10;
    vertical-align: bottom;
    pointer-events: none;
    color: rgb(76, 216, 100);

  }

  .active {
    background-image: url(../../assets/select.png);
    background-color: currentColor;
    border-color: currentColor;
    background-size: 0.26rem;
    background-repeat: no-repeat;
    background-position: center;
  }

  .uhead {
    width: 100%;
    height: 4rem;
    background: #03a9f4;
    padding-top: 0.4rem;
    .usex {
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 99%;
      margin: 0 auto 0.2rem;
      background-color: #fff;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      position: relative;
      text-align: center;
      line-height: 1.6rem;
      i {
        font-size: 0.8rem;
        color: #03a9f4;
      }
    }
    .uname {
      width: 100%;
      height: 0.6rem;
      line-height: 0.6rem;
      color: #f7fcff;
      font-size: 0.3rem;
      text-align: center;
      font-weight: bold;
    }
    .uphone {
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      color: #f7fcff;
      font-size: 0.28rem;
      text-align: center;
      font-weight: bold;
    }
    .udefault {
      width: 100%;
      height: 0.6rem;
      line-height: 0.6rem;
      color: #f7fcff;
      font-size: 0.24rem;
      text-align: center;
      position: relative;
      .modify {
        width: 0.6rem;
        height: 0.6rem;
        background: url(../../assets/modify.png) no-repeat center;
        background-size: 0.4rem;
        display: inline-block;
        position: absolute;
        top: 0rem;
      }
    }
  }

  .uinfo {
    margin: 0.4rem 0;
  }

  .logout {
    width: 100%;
    height: 0.88rem;
    background: #fff;
    text-align: center;
    line-height: 0.88rem;
    color: #101010;
  }

  .pop-info {
    padding: 0.2rem;
    border-radius: 4px;
    background: #fff;
    .pop-head {
      color: #222;
      text-align: center;
      font-size: 0.3rem;
    }
  }

</style>

